<template>
  <div class="formDemo content">
    <public-form
      ref="publicForm"
      :formObj="formObj"
      :formData="formData"
      :rules="rules"
      :searchSelectOptionsCb="searchSelectOptionsCb"
      @selectChange="selectChange"
      @inputINPUT="inputINPUT"
      @inputChange="inputChange"
      @querySelectValue="querySelectValue"
      @formSwitchChange="formSwitchChange"
      @buttonClick="buttonClick"
    >
    </public-form>
  </div>
</template>
<script>
import formJs from "./test-form.js";
import publicForm from "&/form/form.vue";
import { reactive, ref } from "@vue/reactivity";
export default {
  components: {
    publicForm,
  },
  setup() {
    const formObj = reactive(formJs.formObj);
    const formData = reactive(formJs.formData);
    const rules = ref(formJs.formRules);
    console.log(rules.value)
    setTimeout(() => {
      console.log(rules.value)
    }, 1000);
    // 获取搜索下拉列表
    let searchSelectOptionsCb = ref([]);

    const selectChange = (value, index, prop) => {
      console.log('selectChange', value, index, prop)
    }

    const inputChange = (value, index, prop) => {
      console.log('inputChange', value, index, prop)
    }

    const inputINPUT = (value, index, prop) => {
      console.log('inputINPUT', value, index, prop)
    }
    
    const formSwitchChange = () => {
      console.log('formSwitchChange')
    }
    const buttonClick = () => {
      console.log('buttonClick')
    }

    // 获取搜索下拉列表
    const querySelectValue = () => {
      let arr = [{
        label: '搜索返回1号',
        value: 1
      }, {
        label: '搜索返回2号',
        value: 2
      }];
			searchSelectOptionsCb.value = arr;
    }

    return {
      rules,
      searchSelectOptionsCb,
      formObj,
      formData,
      selectChange,
      inputChange,
      inputINPUT,
      buttonClick,
      formSwitchChange,
      querySelectValue,
    };
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 50px
}
// .formDemo {
//   width: 1080px;
//   height: 500px;
//   margin: 0 auto;
// }
</style>